<template>
  <div class="history">
    <div class="top">
      <div class="in">
        <div class="query-form">
          <el-row :gutter="20">
            <el-col :span="4"></el-col>
            <el-col :span="7">
              <el-select
                placeholder="请选择监测项目"
                v-model="monitor"
                multiple
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in monitorList"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-select
                placeholder="请选择监测时间段"
                v-model="times"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in timesList"
                  :key="item.name"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-date-picker
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                v-model="datePicker"
                placeholder="选择日期时间"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="getChartFn()">确定</el-button>
              <el-button type="primary" @click="exportFn()"
                >导出excel</el-button
              >
            </el-col>
            <el-col :span="4"></el-col>
          </el-row>
        </div>
        <div class="charts-box" ref="chartBox1"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="in">
          <div class="module">
            <div class="title">
              <span>历史云图</span>
              <span>{{ cloudChartDatePicker }}</span>
            </div>
            <div class="con">
              <div ref="chartBox3" class="echartsHeatMap"></div>
              <div class="chartBox3-bg">
                <div class="b1 point normal"></div>
                <div class="b2 point normal"></div>
                <div class="f1 point normal"></div>
                <div class="f2 point normal"></div>
                <div class="l1 point normal"></div>
                <div class="l2 point normal"></div>
                <div class="r1 point normal"></div>
                <div class="r2 point normal"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="center">
        <div class="in">
          <div class="module">
            <div class="title">
              <span>火焰电视历史视频</span>
            </div>
            <div class="con con3">
              <div class="table-box table-video">
                <el-row class="time">
                  <el-col :span="2"></el-col>
                  <el-col :span="8">
                    <el-date-picker
                      type="datetime"
                      v-model="videoStartTime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="选择时间"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                  <el-col
                    :span="1"
                    style="text-align: center; line-height: 3vh; color: #409eff"
                    >-</el-col
                  >
                  <el-col :span="8">
                    <el-date-picker
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      v-model="videoEndTime"
                      placeholder="选择时间"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                  <el-col :span="3">
                    <el-button
                      type="primary"
                      @click="getVideoFn"
                      style="margin-left: 1vh"
                      >确定</el-button
                    >
                  </el-col>
                  <el-col :span="2"></el-col>
                </el-row>
                <div class="table-h">
                  <p>名称</p>
                  <p>开始时间</p>
                  <p>时长(min)</p>
                  <p>操作</p>
                </div>
                <ul class="table-c">
                  <li v-for="item in videoList" :key="item.start">
                    <p>{{ item.videoname }}</p>
                    <p>{{ item.start }}</p>
                    <p>{{ item.duration }}</p>
                    <p class="img-box">
                      <img
                        src="../assets/img/video.png"
                        @click="seeVideo(item)"
                      />
                      <a
                        target="_blank"
                        :href="
                          'http://121.41.120.212:8080/combustion_monitor/history/download/' +
                          item.videoname
                        "
                      >
                        <img src="../assets/img/down.png" />
                      </a>
                    </p>
                  </li>
                </ul>
                <div class="page" v-if="total > 0">
                  <el-pagination
                    small
                    background
                    layout="prev, pager, next"
                    :total="totalVideo"
                    v-model:current-page="pageVideo"
                    v-model:page-size="pageSize"
                    class="mt-4"
                    prev-text="上一页"
                    next-text="下一页"
                    @current-change="getVideoFn"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="in">
          <div class="module">
            <div class="title">
              <span>报警记录</span>
            </div>
            <div class="con con3">
              <div class="table-box">
                <el-row class="time" style="position: relative; z-index: 999">
                  <el-col :span="1"></el-col>
                  <el-col :span="10">
                    <el-date-picker
                      type="datetime"
                      v-model="alarmStartTime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="选择时间"
                      style="width: 100%; font-size: 1.1vh"
                    ></el-date-picker>
                  </el-col>
                  <el-col
                    :span="1"
                    style="text-align: center; line-height: 3vh; color: #409eff"
                    >-</el-col
                  >
                  <el-col :span="10">
                    <el-date-picker
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      v-model="alarmEndTime"
                      placeholder="选择时间"
                      style="width: 100%; font-size: 1.1vh"
                    ></el-date-picker>
                  </el-col>
                  <el-col :span="1">
                    <el-button
                      type="primary"
                      @click="getAlarmFn()"
                      style="margin-left: 1vh"
                      >确定</el-button
                    >
                  </el-col>
                  <el-col :span="1"></el-col>
                </el-row>
                <div class="table-h">
                  <p>报警时间</p>
                  <p>报警内容</p>
                  <p>持续时间(min)</p>
                </div>
                <ul class="table-c">
                  <li v-for="item in warningList" :key="item.start">
                    <p>{{ item.start }}</p>
                    <p>{{ item.state }}</p>
                    <p>{{ item.duration }}</p>
                  </li>
                </ul>
                <div class="page" v-if="total > 0">
                  <el-pagination
                    small
                    background
                    layout="prev, pager, next"
                    :total="total"
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    class="mt-4"
                    prev-text="上一页"
                    next-text="下一页"
                    @current-change="getAlarmFn()"
                  />
                </div>
              </div>
              <div class="charts-box" ref="chartBox2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频放大弹窗 -->
    <div class="video-mask" v-if="bigVideoOpen"></div>
    <div class="video-big-box" v-if="bigVideoOpen">
      <div class="in-video-big-box">
        <div class="even">
          <div class="time-close">
            <img src="../assets/img/close.png" @click="closeVideo()" />
          </div>
          <div class="video-tag">
            <video
              controls
              :src="
                'http://121.41.120.212:8080/combustion_monitor/history/videos/' +
                videoSrc
              "
              autoplay
            ></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  listMonitor,
  getHistoryChart,
  exportExcel,
  listAlarm,
  listVideo,
  cloud,
} from "../http/api.js";
import * as echarts from "echarts";
import { toRefs, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const chartBox1 = ref(null);
let chartOne = undefined;

const chartBox2 = ref(null);
let chartTwo = undefined;
let chatMap = null;
const chartBox3 = ref(null);
const data = reactive({
  monitor: undefined,
  monitorList: [],
  times: undefined,
  maxV: undefined,
  minV: undefined,
  timesList: [
    {
      id: 1,
      name: "5min",
    },
    {
      id: 2,
      name: "10min",
    },
    {
      id: 3,
      name: "1h",
    },
    {
      id: 4,
      name: "4h",
    },
    {
      id: 5,
      name: "8h",
    },
    {
      id: 6,
      name: "60h",
    },
  ],
  datePicker: undefined,
  cloudChartDatePicker: undefined,
  st: undefined,
  et: undefined,
  chartData: {},
  alarmStartTime: undefined, // 报警开始时间
  alarmEndTime: undefined, // 报警结束时间
  page: 1,
  pageSize: 5,
  total: 0,
  warningList: [],
  videoList: [],
  videoStartTime: undefined,
  videoEndTime: undefined,
  pageVideo: 1,
  totalVideo: 0,
  bigVideoOpen: false, // 视频
  videoSrc: undefined,
});
const {
  monitor,
  monitorList,
  times,
  timesList,
  maxV,
  minV,
  datePicker,
  st,
  et,
  chartData,
  alarmStartTime,
  alarmEndTime,
  page,
  total,
  warningList,
  videoList,
  videoStartTime,
  videoEndTime,
  pageVideo,
  totalVideo,
  bigVideoOpen,
  videoSrc,
  cloudChartDatePicker,
  pageSize,
} = toRefs(data);

getMonitorList();
initAlarm();
initVideo();

function getMonitorList() {
  monitorList.value = [];
  listMonitor().then((res) => {
    monitorList.value = [
      ...res.wall_front,
      ...res.wall_back,
      ...res.wall_left,
      ...res.wall_right,
    ];
    monitorList.value.map((item, index) => {
      monitor.value.push(item);
    });
    initChart();
  });
}
function exportFn() {
  let queryStr = "variable=";
  queryStr = queryStr + monitor.value.join("&variable=");
  queryStr = queryStr.toLowerCase();
  exportExcel(
    {
      start_time: st.value,
      end_time: et.value,
    },
    queryStr
  ).then((res) => {
    let blob = new Blob([res], { type: `xls;charset=utf-8` }); // type指定下载文件的类型
    let downloadElement = document.createElement("a");
    let href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    downloadElement.download = "history.csv";
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);
  });
}
function getAlarmFn() {
  listAlarm({
    start_time: alarmStartTime.value,
    end_time: alarmEndTime.value,
    page: page.value,
    pageSize: pageSize.value,
  }).then((res) => {
    warningList.value = res.data;
    if (page.value == 1) {
      total.value = res.total;
      initPieChart(res.pie_charts);
    }
  });
}

function initAlarm() {
  let now = getFormatTime(new Date().getTime());
  let year = now.split(" ")[0].split("-")[0];
  let month = now.split(" ")[0].split("-")[1];
  alarmEndTime.value = now;
  alarmStartTime.value = year + "-" + month + "-" + "01" + " 00:00:00";
  page.value = 1;
  getAlarmFn();
}

function initVideo() {
  let now = getFormatTime(new Date().getTime());
  videoStartTime.value = getFormatTime(
    new Date().getTime() - 1 * 60 * 60 * 1000
  );
  videoEndTime.value = now;
  pageVideo.value = 1;
  getVideoFn();
}
function getVideoFn() {
  listVideo({
    start_time: videoStartTime.value,
    end_time: videoEndTime.value,
    page: pageVideo.value ? pageVideo.value : 1,
    pageSize: pageSize.value,
  }).then((res) => {
    videoList.value = res.data;
    totalVideo.value = res.total;
  });
}
function seeVideo(item) {
  bigVideoOpen.value = true;
  videoSrc.value = item.videoname;
}
function closeVideo() {
  bigVideoOpen.value = false;
}

function initChart() {
  times.value = "5min";
  monitor.value = monitorList;
  datePicker.value = getFormatTime(new Date().getTime());
  cloudChartDatePicker.value = getFormatTime(new Date().getTime());
  getChartFn();
  getCloudData();
}

function getChartFn() {
  if (chartOne) {
    chartOne.off("click");
    chartOne.clear();
    chartOne = null;
  }
  let sEtime = getStartEndTime();
  let params = {
    start_time: sEtime.start,
    end_time: sEtime.end,
    time_unit: times.value,
  };

  callbackChart(params);
}
function callbackChart(params) {
  let queryStr = "";
  chartData.value = {};
  for (let i = 0; i < monitor.value.length; i++) {
    queryStr += "variable=" + monitor.value[i].toLowerCase() + "&";
  }
  getHistoryChart(params, queryStr).then((allRes) => {
    let res = allRes;
    for (let i = 0; i < res.length; i++) {
      let item = res[i];
      let key = item.name;
      let serData = chartData.value[key];
      if (!serData) {
        serData = [];
        chartData.value[key] = serData;
      }
      let value = res[i].value ? res[i].value.toFixed(2) : 0;
      serData.push([new Date(res[i].timestamp).getTime(), value]);
      if (!minV.value) {
        minV.value = Number(value);
      }
      if (!maxV.value) {
        maxV.value = Number(value);
      }
      if (Number(value) < minV.value) {
        minV.value = Number(value);
      }
      if (Number(value) > maxV.value) {
        maxV.value = Number(value);
      }
    }
    drawChart();
  });
}
function chartOneClick(param) {
  let data = param.value[0];
  if (data) {
    ElMessageBox.confirm("是否要查看选中日期的历史云图", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      center: false,
    })
      .then(() => {
        let time = getFormatTime(data);
        let params = {
          history_time: time,
        };
        cloudChartDatePicker.value = time;
        // callbackChart(params);
        getCloudData(params);
      })
      .catch(() => {});
  }
}
function drawChart() {
  if (!chartOne) {
    chartOne = echarts.init(chartBox1.value, "macarons");
  }
  let yData = [];
  for (let key in chartData.value) {
    let json = {
      name: key,
      type: "line",
      lineStyle: {
        normal: {
          width: 2,
        },
      },
      showSymbol: false,
      smooth: true,
      data: chartData.value[key],
    };

    yData.push(json);
  }
  let option = {
    legend: {
      show: true,
      top: 15,
      textStyle: { color: "#ffffff" },
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      axisPointer: {
        animation: false,
      },
      cofine: true,
    },
    grid: {
      top: 50,
      left: 30,
      right: 30,
      bottom: 40,
      containLabel: true,
    },
    xAxis: [
      {
        type: "time",
        // data: xData,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          padding: [0, 5, 0, 5], //文字左右定位
          textStyle: {
            color: "#dedede",
            fontSize: "14", //文字大小
          },
          formatter: (value, index) => {
            let dateTime = getFormatTime(value);
            return dateTime.split(" ")[0] + "\n" + dateTime.split(" ")[1];
          },
        },
      },
    ],
    yAxis: {
      max: maxV.value + 50,
      min: minV.value - 50 < 0 ? 0 : minV.value - 50,
      name: "温度/℃",
      nameTextStyle: {
        color: "#dedede",
        padding: [0, 0, 15, 35], //表示[上,右,下,左]的边距
      },
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(227,227,227,0.2)",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#dedede",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: yData,
    animationDuration: 0,
    animationEasing: "cubicInOut",
  };
  chartOne.setOption(option, true);
  chartOne.on("click", (param) => {
    chartOneClick(param);
  });
}

function initPieChart(json) {
  let serData = [];
  let count = 0;
  for (let key in json) {
    serData.push({
      name: key,
      value: json[key],
    });
    count += json[key];
  }
  if (!chartTwo) {
    chartTwo = echarts.init(chartBox2.value, "macarons");
  }
  let option = {
    backgroundColor: "transparent",
    title: {
      text: "报警统计数据",
      subtext: count,
      textStyle: {
        color: "#f2f2f2",
        fontSize: 14,
        // align: 'center'
      },
      subtextStyle: {
        fontSize: 14,
        color: ["#ff9d19"],
      },
      x: "center",
      y: "35%",
    },
    tooltip: {
      trigger: "item",
    },
    grid: {
      bottom: 20,
      left: 20,
      right: 20,
    },
    legend: {
      orient: "vertical",
      right: "center",
      top: "70%",
      textStyle: {
        color: "#f2f2f2",
        fontSize: 12,
      },
      icon: "roundRect",
      data: serData,
    },
    series: [
      // 主要展示层的
      {
        radius: ["45%", "60%"],
        center: ["50%", "40%"],
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        data: serData,
      },
      // 边框的设置
      {
        radius: ["45%", "52%"],
        center: ["50%", "40%"],
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: "rgba(250,250,250,0.3)",
            },
          },
        ],
      },
      {
        name: "外边框",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ["50%", "30%"],
        radius: ["65%", "65%"],
        label: {
          normal: {
            show: false,
          },
        },
      },
    ],
  };
  chartTwo.setOption(option, true);
}

// 时间方法
function getStartEndTime() {
  let curDate = new Date(datePicker.value).getTime();
  let start = getFormatTime(curDate - 1 * 60 * 1000);
  let end = getFormatTime(curDate + 1 * 60 * 1000);
  st.value = start;
  et.value = end;
  return {
    start: start,
    end: end,
  };
}
function getFormatTime(stamp) {
  // stamp = stamp * 1000;
  let year = new Date(stamp).getFullYear();
  let month = new Date(stamp).getMonth() + 1;
  month = month < 10 ? "0" + month : month;
  let date = new Date(stamp).getDate();
  date = date < 10 ? "0" + date : date;
  return (
    year +
    "-" +
    month +
    "-" +
    date +
    " " +
    new Date(stamp).toLocaleTimeString("chinese", { hour12: false })
  );
}

function getNoiseHelper(global) {
  var module = {};

  function Grad(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  Grad.prototype.dot2 = function (x, y) {
    return this.x * x + this.y * y;
  };

  Grad.prototype.dot3 = function (x, y, z) {
    return this.x * x + this.y * y + this.z * z;
  };

  var grad3 = [
    new Grad(1, 1, 0),
    new Grad(-1, 1, 0),
    new Grad(1, -1, 0),
    new Grad(-1, -1, 0),
    new Grad(1, 0, 1),
    new Grad(-1, 0, 1),
    new Grad(1, 0, -1),
    new Grad(-1, 0, -1),
    new Grad(0, 1, 1),
    new Grad(0, -1, 1),
    new Grad(0, 1, -1),
    new Grad(0, -1, -1),
  ];

  var p = [
    151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140,
    36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120,
    234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33,
    88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71,
    134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133,
    230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161,
    1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130,
    116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250,
    124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227,
    47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44,
    154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98,
    108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34,
    242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14,
    239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121,
    50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243,
    141, 128, 195, 78, 66, 215, 61, 156, 180,
  ];
  // To remove the need for index wrapping, double the permutation table length
  var perm = new Array(512);
  var gradP = new Array(512);

  // This isn't a very good seeding function, but it works ok. It supports 2^16
  // different seed values. Write something better if you need more seeds.
  module.seed = function (seed) {
    if (seed > 0 && seed < 1) {
      // Scale the seed out
      seed *= 65536;
    }

    seed = Math.floor(seed);
    if (seed < 256) {
      seed |= seed << 8;
    }

    for (var i = 0; i < 256; i++) {
      var v;
      if (i & 1) {
        v = p[i] ^ (seed & 255);
      } else {
        v = p[i] ^ ((seed >> 8) & 255);
      }

      perm[i] = perm[i + 256] = v;
      gradP[i] = gradP[i + 256] = grad3[v % 12];
    }
  };

  module.seed(0);

  /*
  for(var i=0; i<256; i++) {
    perm[i] = perm[i + 256] = p[i];
    gradP[i] = gradP[i + 256] = grad3[perm[i] % 12];
  }*/

  // Skewing and unskewing factors for 2, 3, and 4 dimensions
  var F2 = 0.5 * (Math.sqrt(3) - 1);
  var G2 = (3 - Math.sqrt(3)) / 6;

  var F3 = 1 / 3;
  var G3 = 1 / 6;

  // 2D simplex noise
  module.simplex2 = function (xin, yin) {
    var n0, n1, n2; // Noise contributions from the three corners
    // Skew the input space to determine which simplex cell we're in
    var s = (xin + yin) * F2; // Hairy factor for 2D
    var i = Math.floor(xin + s);
    var j = Math.floor(yin + s);
    var t = (i + j) * G2;
    var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
    var y0 = yin - j + t;
    // For the 2D case, the simplex shape is an equilateral triangle.
    // Determine which simplex we are in.
    var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
    if (x0 > y0) {
      // lower triangle, XY order: (0,0)->(1,0)->(1,1)
      i1 = 1;
      j1 = 0;
    } else {
      // upper triangle, YX order: (0,0)->(0,1)->(1,1)
      i1 = 0;
      j1 = 1;
    }
    // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
    // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
    // c = (3-sqrt(3))/6
    var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
    var y1 = y0 - j1 + G2;
    var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
    var y2 = y0 - 1 + 2 * G2;
    // Work out the hashed gradient indices of the three simplex corners
    i &= 255;
    j &= 255;
    var gi0 = gradP[i + perm[j]];
    var gi1 = gradP[i + i1 + perm[j + j1]];
    var gi2 = gradP[i + 1 + perm[j + 1]];
    // Calculate the contribution from the three corners
    var t0 = 0.5 - x0 * x0 - y0 * y0;
    if (t0 < 0) {
      n0 = 0;
    } else {
      t0 *= t0;
      n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient
    }
    var t1 = 0.5 - x1 * x1 - y1 * y1;
    if (t1 < 0) {
      n1 = 0;
    } else {
      t1 *= t1;
      n1 = t1 * t1 * gi1.dot2(x1, y1);
    }
    var t2 = 0.5 - x2 * x2 - y2 * y2;
    if (t2 < 0) {
      n2 = 0;
    } else {
      t2 *= t2;
      n2 = t2 * t2 * gi2.dot2(x2, y2);
    }
    // Add contributions from each corner to get the final noise value.
    // The result is scaled to return values in the interval [-1,1].
    return 70 * (n0 + n1 + n2);
  };

  // 3D simplex noise
  module.simplex3 = function (xin, yin, zin) {
    var n0, n1, n2, n3; // Noise contributions from the four corners

    // Skew the input space to determine which simplex cell we're in
    var s = (xin + yin + zin) * F3; // Hairy factor for 2D
    var i = Math.floor(xin + s);
    var j = Math.floor(yin + s);
    var k = Math.floor(zin + s);

    var t = (i + j + k) * G3;
    var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
    var y0 = yin - j + t;
    var z0 = zin - k + t;

    // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
    // Determine which simplex we are in.
    var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
    var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
    if (x0 >= y0) {
      if (y0 >= z0) {
        i1 = 1;
        j1 = 0;
        k1 = 0;
        i2 = 1;
        j2 = 1;
        k2 = 0;
      } else if (x0 >= z0) {
        i1 = 1;
        j1 = 0;
        k1 = 0;
        i2 = 1;
        j2 = 0;
        k2 = 1;
      } else {
        i1 = 0;
        j1 = 0;
        k1 = 1;
        i2 = 1;
        j2 = 0;
        k2 = 1;
      }
    } else {
      if (y0 < z0) {
        i1 = 0;
        j1 = 0;
        k1 = 1;
        i2 = 0;
        j2 = 1;
        k2 = 1;
      } else if (x0 < z0) {
        i1 = 0;
        j1 = 1;
        k1 = 0;
        i2 = 0;
        j2 = 1;
        k2 = 1;
      } else {
        i1 = 0;
        j1 = 1;
        k1 = 0;
        i2 = 1;
        j2 = 1;
        k2 = 0;
      }
    }
    // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
    // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
    // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
    // c = 1/6.
    var x1 = x0 - i1 + G3; // Offsets for second corner
    var y1 = y0 - j1 + G3;
    var z1 = z0 - k1 + G3;

    var x2 = x0 - i2 + 2 * G3; // Offsets for third corner
    var y2 = y0 - j2 + 2 * G3;
    var z2 = z0 - k2 + 2 * G3;

    var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner
    var y3 = y0 - 1 + 3 * G3;
    var z3 = z0 - 1 + 3 * G3;

    // Work out the hashed gradient indices of the four simplex corners
    i &= 255;
    j &= 255;
    k &= 255;
    var gi0 = gradP[i + perm[j + perm[k]]];
    var gi1 = gradP[i + i1 + perm[j + j1 + perm[k + k1]]];
    var gi2 = gradP[i + i2 + perm[j + j2 + perm[k + k2]]];
    var gi3 = gradP[i + 1 + perm[j + 1 + perm[k + 1]]];

    // Calculate the contribution from the four corners
    var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
    if (t0 < 0) {
      n0 = 0;
    } else {
      t0 *= t0;
      n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient
    }
    var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
    if (t1 < 0) {
      n1 = 0;
    } else {
      t1 *= t1;
      n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
    }
    var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
    if (t2 < 0) {
      n2 = 0;
    } else {
      t2 *= t2;
      n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
    }
    var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
    if (t3 < 0) {
      n3 = 0;
    } else {
      t3 *= t3;
      n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
    }
    // Add contributions from each corner to get the final noise value.
    // The result is scaled to return values in the interval [-1,1].
    return 32 * (n0 + n1 + n2 + n3);
  };

  // ##### Perlin noise stuff

  function fade(t) {
    return t * t * t * (t * (t * 6 - 15) + 10);
  }

  function lerp(a, b, t) {
    return (1 - t) * a + t * b;
  }

  // 2D Perlin Noise
  module.perlin2 = function (x, y) {
    // Find unit grid cell containing point
    var X = Math.floor(x),
      Y = Math.floor(y);
    // Get relative xy coordinates of point within that cell
    x = x - X;
    y = y - Y;
    // Wrap the integer cells at 255 (smaller integer period can be introduced here)
    X = X & 255;
    Y = Y & 255;

    // Calculate noise contributions from each of the four corners
    var n00 = gradP[X + perm[Y]].dot2(x, y);
    var n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1);
    var n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y);
    var n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1);

    // Compute the fade curve value for x
    var u = fade(x);

    // Interpolate the four results
    return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y));
  };

  // 3D Perlin Noise
  module.perlin3 = function (x, y, z) {
    // Find unit grid cell containing point
    var X = Math.floor(x),
      Y = Math.floor(y),
      Z = Math.floor(z);
    // Get relative xyz coordinates of point within that cell
    x = x - X;
    y = y - Y;
    z = z - Z;
    // Wrap the integer cells at 255 (smaller integer period can be introduced here)
    X = X & 255;
    Y = Y & 255;
    Z = Z & 255;

    // Calculate noise contributions from each of the eight corners
    var n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z);
    var n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1);
    var n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z);
    var n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1);
    var n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z);
    var n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1);
    var n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z);
    var n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(
      x - 1,
      y - 1,
      z - 1
    );

    // Compute the fade curve value for x, y, z
    var u = fade(x);
    var v = fade(y);
    var w = fade(z);

    // Interpolate
    return lerp(
      lerp(lerp(n000, n100, u), lerp(n001, n101, u), w),
      lerp(lerp(n010, n110, u), lerp(n011, n111, u), w),
      v
    );
  };
  return module;
}
// function generateData(theta, min, max, noise, xData, yData) {
//   var data = [];
//   for (var i = 0; i <= 200; i++) {
//     for (var j = 0; j <= 100; j++) {
//       // var x = (max - min) * i / 200 + min;
//       // var y = (max - min) * j / 100 + min;
//       data.push([i, j, noise.perlin2(i / 40, j / 20) + 0.5]);
//       // data.push([i, j, normalDist(theta, x) * normalDist(theta, y)]);
//     }
//     xData.push(i);
//   }
//   for (var j = 0; j < 100; j++) {
//     yData.push(j);
//   }
//   return data;
// }

// const getGenerateData = (data) => {
//   if (data) {
//     let xData = [];
//     let yData = [];
//     // xData.value = [];
//     // yData.value = [];
//     data.map((item) => {
//       if (xData.indexOf(item[0]) === -1) {
//         xData.push(item[0]);
//       }
//       if (yData.indexOf(item[1]) === -1) {
//         yData.push(item[1]);
//       }

//       //item[2] = item[2] /10000 +0.5
//     });
//     initEchartsChatMap(xData, yData, data);
//   }
//   //let data = cloudData.value = data.cloud_data
// };
const getCloudData = (time) => {
  let param = {
    history_time:
      time && time.history_time
        ? time.history_time
        : cloudChartDatePicker.value,
  };
  cloud(param).then((res) => {
    console.log("获取数据", res);
    let data = res.cloud_data;
    if (data) {
      let xData = [];
      let yData = [];
      // xData.value = [];
      // yData.value = [];
      data.map((item) => {
        if (xData.indexOf(item[0]) === -1) {
          xData.push(item[0]);
        }
        if (yData.indexOf(item[1]) === -1) {
          yData.push(item[1]);
        }

        //item[2] = item[2] /10000 +0.5
      });
      initEchartsChatMap(xData, yData, data);
    }
  });
};
const initEchartsChatMap = (xData, yData, data) => {
  // var noise = getNoiseHelper();
  // var xData = [];
  // var yData = [];
  // noise.seed(Math.random());
  // var data = generateData(2, 1000, 1500, noise, xData, yData);

  //var data = cloud(param);
  //console.log(xData,yData,data);
  chatMap = echarts.init(chartBox3.value, "macarons");
  let option = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: xData,
      show: false,
    },
    yAxis: {
      type: "category",
      data: yData,
      show: false,
    },
    grid: {
      top: "12%",
      bottom: "12%",
      left: "23%",
      right: "28%",
    },
    visualMap: [
      {
        min: 1100,
        max: 1700,
        top: "20%",
        right: "5%",
        itemHeight: 180,
        calculable: true,
        realtime: false,
        inRange: {
          color: [
            "#0001AB",
            "#0000DA",
            "#0000FD",
            "#0050FD",
            "#0093FB",
            "#06FFFF",
            "#8EFE71",
            "#FEFF00",
            "#FD9D04",
            "#FE3701",
            "#D00000",
            "#8A0000",
          ],
        },
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
      // {
      // 	min: 0,
      // 	max: 1,
      // 	top:"30%",
      // 	right:"15%",
      // 	showLabel: !0,
      // 	text: ['℃', ''],
      // 	seriesIndex:1,
      // 	textStyle:{
      // 		color:'#ffffff'
      // 	},
      // 	selectedMode:false,
      // 	pieces: [
      // 		{
      // 			gt: 1200,
      // 			lte: 1300,
      // 			label: '结焦高风险区域',
      // 			color: '#FE3701',
      // 		},
      // 		{
      // 			gte: 1100,
      // 			lte: 1200,
      // 			label: '1100-1200',
      // 			color: '#8EFE71',
      // 		},
      // 		{
      // 			gte: 1000,
      // 			lt: 1100,
      // 			label: '1000-1100',
      // 			color: '#0093FB',
      // 		},
      // 		{
      // 			gt: 900,
      // 			lt: 1000,
      // 			label: '900-1000',
      // 			color: '#0001AB',
      // 		},
      // 	],
      // 	show: !0,
      // 	}
    ],
    series: [
      {
        name: "Gaussian",
        type: "heatmap",
        data: data,
        emphasis: {
          itemStyle: {
            borderColor: "#333",
            borderWidth: 1,
          },
        },
        progressive: 1000,
        animation: false,
      },
    ],
  };
  chatMap.setOption(option);
};

onMounted(() => {
  //initEchartsChatMap();
});
</script>
<style lang="scss" scoped>
.history {
  height: 100%;
  .top {
    height: 45%;
    border: 0.1vh solid #1175df;
    padding: 0.8vh;
    .in {
      height: 100%;
      box-shadow: 0 0 1.8vh #1175df inset;
      padding: 2vh 0 0 0;
      .charts-box {
        height: calc(100% - 3.2vh);
      }
    }
    .module {
      .title {
        height: 4.8vh;
        background: linear-gradient(
          to right,
          rgba(9, 95, 253, 0.8),
          rgba(9, 95, 253, 0)
        );
        line-height: 4.8vh;
        color: #efefef;
        text-indent: 3vh;
        font-size: 1.7vh;
        letter-spacing: 0.1vh;
      }
      .con {
        height: 10vh;
      }
    }
  }
  .bottom {
    height: calc(55% - 1.5vh);
    margin-top: 1.5vh;
    display: flex;
    justify-content: space-between;
    .left,
    .center,
    .right {
      width: calc(46% - 2vh);
      border: 0.1vh solid #1175df;
      height: 100%;
      padding: 0.8vh;
      .in {
        height: 100%;
        box-shadow: 0 0 1.8vh #1175df inset;
        padding: 2vh 0;
        .module {
          height: 100%;
          .title {
            height: 4.8vh;
            background: linear-gradient(
              to right,
              rgba(9, 95, 253, 0.8),
              rgba(9, 95, 253, 0)
            );
            display: flex;
            padding: 0 3vh;
            justify-content: space-between;
            span {
              line-height: 4.8vh;
              color: #efefef;
              font-size: 1.7vh;
              letter-spacing: 0.1vh;
            }
          }
          .con {
            position: relative;
            height: calc(100% - 4.8vh);
            .echartsHeatMap {
              width: 100%;
              height: 100%;
            }
            // 云图背景
            .chartBox3-bg {
              width: 49%;
              height: calc(100% - 8vh);
              position: absolute;
              left: 23%;
              top: 4vh;
              background: url("../assets/img/yt_bg.png") center center no-repeat;
              background-size: 100% 100%;
              .point {
                position: absolute;
                width: 2vh;
                height: 2vh;
                z-index: 10;
                &::before {
                  color: #eaeffc;
                  text-shadow: 0 0 4vh #0ba1d4, 0 0 0.2vh #fff, 0 0 0.2vh #fff,
                    0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4,
                    0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4;
                }
                &.normal {
                  background-color: #01ebff;
                  // border: 0.2vh solid #0c75fd;
                  .state {
                    background-color: #0f444a;
                    color: #34eb6d;
                  }
                }
                &.warn {
                  background-color: #f83100;
                  .state {
                    background-color: #362138;
                    color: #e52f07;
                  }
                }
                // 上
                &.b1 {
                  top: 0;
                  left: 25%;
                  &::before {
                    content: "L1";
                    position: absolute;
                    top: -3vh;
                    color: #fff;
                  }
                }
                &.b2 {
                  top: 0;
                  left: calc(75% - 2vh);
                  &::before {
                    content: "L2";
                    position: absolute;
                    top: -3vh;
                    color: #fff;
                  }
                }
                // 下
                &.f1 {
                  bottom: 0;
                  left: 25%;
                  &::before {
                    content: "R2";
                    position: absolute;
                    bottom: -3vh;
                    color: #fff;
                  }
                }
                &.f2 {
                  bottom: 0;
                  left: calc(75% - 2vh);
                  &::before {
                    content: "R1";
                    position: absolute;
                    bottom: -3vh;
                    color: #fff;
                  }
                }
                // 左
                &.l1 {
                  left: 0;
                  top: 25%;
                  &::before {
                    content: "F2";
                    position: absolute;
                    left: -3vh;
                    color: #fff;
                  }
                }
                &.l2 {
                  left: 0;
                  top: calc(75% - 2vh);
                  &::before {
                    content: "F1";
                    position: absolute;
                    left: -3vh;
                    color: #fff;
                  }
                }
                // 右
                &.r1 {
                  right: 0;
                  top: 25%;
                  &::before {
                    content: "B1";
                    position: absolute;
                    right: -3vh;
                    color: #fff;
                  }
                }
                &.r2 {
                  right: 0;
                  top: calc(75% - 2vh);
                  &::before {
                    content: "B2";
                    position: absolute;
                    right: -3vh;
                    color: #fff;
                  }
                }
              }
            }
          }
          .con3 {
            display: flex;
            justify-content: space-between;
            height: calc(100% - 4.8vh);
            overflow: auto;
            &::-webkit-scrollbar,
            ::-webkit-scrollbar {
              display: none;
            }
            .table-box {
              width: 65%;
              .time {
                padding: 1.5vh 0;
              }
              .table-h {
                padding-left: 3vh;
                height: 2vh;
                p {
                  display: inline-block;
                  text-align: center;
                  color: #a7a9af;
                  line-height: 2vh;
                  &:nth-child(1) {
                    width: 16vh;
                  }
                  &:nth-child(3) {
                    width: 10vh;
                  }
                  &:nth-child(2) {
                    width: calc(100% - 26vh);
                  }
                }
              }
              .table-c {
                padding-left: 3vh;
                height: calc(100% - 12.2vh);
                overflow: auto;
                li {
                  height: 3.2vh;
                  margin-top: 1.5vh;
                  background: url("../assets/img/li_bg.png") center center
                    no-repeat;
                  background-size: 100% 100%;
                  p {
                    display: inline-block;
                    text-align: center;
                    color: #fff;
                    line-height: 3.2vh;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    &:nth-child(1) {
                      width: 16vh;
                    }
                    &:nth-child(3) {
                      width: 10vh;
                    }
                    &:nth-child(2) {
                      width: calc(100% - 26vh);
                    }
                  }
                }
              }
            }
            .charts-box {
              width: 35%;
            }
            .table-box.table-video {
              width: 100% !important;
              .table-h {
                padding: 0 5%;
                p:nth-child(1) {
                  width: 35%;
                }
                p:nth-child(2) {
                  width: 30%;
                }
                p:nth-child(3) {
                  width: 15%;
                }
                p:nth-child(4) {
                  width: 20%;
                }
              }
              .table-c {
                padding: 0 5%;
                p:nth-child(1) {
                  width: 35%;
                  padding: 0 20px;
                }
                p:nth-child(2) {
                  width: 30%;
                }
                p:nth-child(3) {
                  width: 15%;
                }
                p:nth-child(4) {
                  width: 20%;
                }
                .img-box {
                  height: 100%;
                  overflow: hidden;
                  img {
                    margin-top: 6px;
                    width: 22px;
                    cursor: pointer;
                    &:nth-child(1) {
                      margin-right: 10px;
                    }
                  }
                }
              }
              .page {
                padding: 0 5%;
              }
            }
          }
        }
      }
    }
    .left {
      width: 28%;
    }
    .center {
      width: 33%;
    }
    .right {
      width: 39%;
    }
    .page {
      display: flex;
      justify-content: end;
      margin-top: 1vh;
    }
  }
}
// 视频放大弹窗
.video-mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99;
  left: 0;
  top: 0;
}
.video-big-box {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  left: 0;
  top: 0;
  .in-video-big-box {
    display: flex;
    background-image: url("../assets/img/icon_left_top.png"),
      url("../assets/img/icon_left_bottom.png"),
      url("../assets/img/icon_right_top.png"),
      url("../assets/img/icon_right_bottom.png");
    background-position: left top, left bottom, right top, right bottom; /* 设置每张图片的位置 */
    background-repeat: no-repeat, no-repeat; /* 设置每张图片的重复方式 */
    background-size: 2vh auto; /* 设置每张图片的尺寸 */
    padding: 1.4vh;
    .even {
      width: 40vw;
      height: 60vh;
      position: relative;
      &:nth-child(1) {
        margin-right: 2vh;
      }
      .time-close {
        height: 3.6vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
        padding: 0 1.5vh;
        position: relative;
        z-index: 9;
        img {
          width: 2.6vh;
          height: 2.6vh;
          cursor: pointer;
        }
      }
      .video-tag {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        video {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
